<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<p>{{VueMsg}}</p>
	<todobox></todobox>
</div>
<script>
	
	Vue.component("todobox",{
	    template:`
	      <div>
	        <todoInput></todoInput>
	        <todoList></todoList>
	      </div>
	    `
 	 });
	var bus = new Vue();
	Vue.component('todoInput',{//输入框
		data : function(){
			return {
				input : '',
			};
		},
		template : `
			<div>
				<h1>待处理的事件</h1>
				<input type="text" v-model='input'/>
				<button @click='add'>add</button>
			</div>
		`,
		methods : {
			add : function(){
				if(!this.input) return ;
				bus.$emit('addEvent',this.input);
				this.input = '';
			}
		},
	});
	Vue.component('todoList',{
		data : function(){
			return {
				listArray : [],
			};
		},
		template : `
			<div>
				<ul>
					<todoItem v-for="(item,index) in listArray" v-bind:content='item' v-bind:key='index' v-bind:myIndex='index'></todoItem>
				</ul>
			</div>
		`,
		mounted : function(){//3也可以用箭头函数 beforeMount mounted created 不行 beforeUpdate
			// var that = this;
			bus.$on('addEvent',function(msg){
				this.listArray.push(msg);
			}.bind(this))
		},
		// methods : {//为什么这里改成这样就不行呢
		// 	addEvent : function(input){
		// 		console.log(1)
		// 		this.listArray.push(input);
		// 	}
		// },
		// methods : {//不行的
		// 	mounted : function(){//3也可以用箭头函数 beforeMount mounted created 不行 beforeUpdate
		// 		// var that = this;
		// 		bus.$on('addEvent',function(msg){
		// 			this.listArray.push(msg);
		// 		}.bind(this))
		// 	},
		// }
	});
	Vue.component('todoItem',{
		props : ['content','myIndex'],
		methods : {
			deleteList : function(){
				console.log(this)
				this.$parent.listArray.splice(this.myIndex,1);
			}
		},
		template : `
			<li>
				<button @click='deleteList'>delete</button>
				<span>{{content}}</span>
			</li>
		`,
	});
	var vm = new Vue({
		el : '#root',
		data : {
			VueMsg : 'Hello VueJs !',
		},
	});
</script>	
</body>
</html>